<!--
//
// AMap.vue
// hs-admin
//
// Created by 区区电脑 on 2023/07/19.
//
-->
<template>
    <div class="AMap">
        <div id="amap" ref="mapDom" class="amap-content"></div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";

const props = defineProps({
    search: {
        type: Boolean,
        default: () => true
    }
});
const emits = defineEmits(["ready"]);
const app = {
    map: null,
    searchMarker: null
}
const state = reactive({
    keyword: null
})

const methods = {
    __initMap(container, callback) {
        app.map = new AMap.Map(container, {
            zoom: 10,//级别
            center: [119.261100, 35.548598]
        });
        app.map.addControl(new AMap.Scale())
        app.map.addControl(new AMap.ToolBar({ruler: true, locate: true, direction: true}))
        //app.map.addControl(new AMap.Geolocation())
        app.geoLocation = new AMap.Geolocation({
            noIpLocate: 3, // 所有终端禁止使用 ip 定位
            noGeoLocation: 0, // 所有终端禁止使用 浏览器 定位
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 100000,          //超过10秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: false,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: false,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        app.map.addControl(app.geoLocation)
        callback && callback(app.map)
    },
    /**
     * 初始化地图
     * @param container
     */
    async initMap(container, callback) {
        if (window.AMap) {
            console.primary("高德地图初始化完成，创建地图组件")
            this.__initMap(container, callback)
        } else {
            console.warning("高德地图未初始化完成，等待中...")
            window.addEventListener("onamap", () => {
                console.primary("高德地图初始化完成，创建地图组件")
                this.__initMap(container, callback)
            })
        }
    },
};
const mapDom = ref();

onMounted(() => {
    methods.initMap(mapDom.value, (map) => {
        emits("ready", map)
    })
})

defineExpose(methods)
</script>

<style lang="scss" scoped>
.AMap {
    width: 100%;
    height: 100%;
    position: relative;
    .amap-content {
        width: 100%;
        height: 100%;
        //border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }
}
</style>
<!-- 高德地图覆盖样式 -->
<style lang="scss">
.amap-info-content {
    border-radius: 6px;
    border: 2px solid var(--el-color-primary);
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 rgba(64, 158, 255, 0.5) !important;
}
.bottom-center .amap-info-sharp {
    border-top: 8px solid var(--el-color-primary);
}
</style>
